<template>
    <div class="container">
        <!-- 左侧面板 -->
        <div class="leftBox">
            <!-- 设备统计 -->
            <div class="panel-box bridge-info-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">设备统计</span>
                </div>
                <div class="info-list">
                    <div class="info-first">
                        <div class="info-item">
                            <img class="img" src="@/assets/imgs/equipment/监控.png" alt="监控">
                            <div class="info-text">
                                <span class="label">监控</span>
                                <span class="value"><span style="color: red;">3</span> 台</span>
                            </div>
                        </div>
                        <div class="info-item">
                            <img class="img" src="@/assets/imgs/equipment/消防设备.png" alt="消防设备">
                            <div class="info-text">
                                <span class="label">消防设备</span>
                                <span class="value"><span style="color: red;">3</span> 台</span>
                            </div>
                        </div>
                    </div>
                    <div class="info-second">
                        <img class="img" src="@/assets/imgs/equipment/道路指示器.png" alt="道路指示器">
                        <div class="info-text">
                            <span class="label">道路指示器</span>
                            <span class="value"><span style="color: red;">3</span> 台</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设备巡检 -->
            <div class="panel-box record-panel" style="flex: 3;">
                <div class="panel-title">
                    <span class="title-text">设备巡检</span>
                </div>
                <div class="device-list">
                    <div class="img-box">
                        <div class="number"> 9</div>
                        <img class="img" src="@/assets/imgs/equipment/设备总数.png" alt="设备总数">
                    </div>
                    <div class="value">距离洗一次巡检：<span style="color: red;">10s</span></div>
                </div>
                <div class="table">
                    <BasicTable :columns="columns" :data="recordData" :isPage="false" height="450">
                        <template #operate="{ row }">
                            <img class="img" src="@/assets/imgs/home/全部通过.png" alt="全部通过">
                            <img class="img" style="margin-left: 10px;" src="@/assets/imgs/home/拒绝.png" alt="拒绝">
                        </template>
                    </BasicTable>
                </div>
            </div>
        </div>

        <!-- 中间区域 -->
        <!-- <div class="centerBox"> -->
            <!-- <Map/> -->
            <!-- 设备切换 -->
            <div class="btnsBox" v-if="$route.path === '/equipment'">
                <img v-for="(item) in equipments" :class="['img', { active: item.name === activeEquipment }]"
                    :src="item.img" :alt="item.name" :key="item.name" @click="changeEquipment(item)">
            </div>
        <!-- </div> -->

        <!-- 右侧面板 -->
        <div class="rightBox">
            <!-- 监控运行状态 -->
            <div class="panel-box monitor-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">监控运行状态</span>
                </div>
                <div class="monitor">
                    <div class="panel-item-title">
                        <img class="img" src="@/assets/imgs/home/摄像头.png" alt="摄像头">
                        <div class="value">监控设备</div>
                    </div>
                    <BasicTable :columns="monitorColumns" :data="monitorData" :isPage="false" height="165">
                    </BasicTable>
                </div>
            </div>

            <!-- 消防设备状态 -->
            <div class="panel-box fire -panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">消防设备状态</span>
                </div>
                <div class="monitor">
                    <div class="panel-item-title">
                        <img class="img" src="@/assets/imgs/home/消防设备.png" alt="消防设备">
                        <div class="value">消防设备</div>
                    </div>
                    <BasicTable :columns="monitorColumns" :data="monitorData" :isPage="false" height="165">
                    </BasicTable>
                </div>
            </div>

            <!-- 道路指示器状态 -->
            <div class="panel-box path-panel" style="flex: 1;">
                <div class="panel-title">
                    <span class="title-text">道路指示器状态</span>
                </div>
                <div class="monitor">
                    <div class="panel-item-title">
                        <img class="img" src="@/assets/imgs/home/车道指示器.png" alt="车道指示器">
                        <div class="value">车道指示器</div>
                    </div>
                    <BasicTable :columns="monitorColumns" :data="monitorData" :isPage="false" height="165">
                    </BasicTable>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { h, ref } from 'vue'
import { ElButton } from 'element-plus'
import 警报 from '@/assets/imgs/map/警报.png';
import 车道指示器 from '@/assets/imgs/map/车道指示器.png';
import 摄像头 from '@/assets/imgs/map/摄像头.png';
import 出现紧急情况1 from '@/assets/imgs/map/出现紧急情况 (1).png'
import 全部 from '@/assets/imgs/map/全部.png'
import 消防设备 from '@/assets/imgs/map/消防设备.png'


const equipments = [
    {
        name: '车道指示器',
        img: 车道指示器,
        id: 1
    },
    {
        name: '摄像头',
        img: 摄像头,
        id: 2
    },
    {
        name: '消防设备',
        img: 消防设备,
        id: 3
    },
    {
        name: '全部',
        img: 全部,
        id: 4
    }
]
const activeEquipment = ref('全部')
/** 点击设备 */
const changeEquipment = (item) => {
    const { name, id } = item;
    activeEquipment.value = name;
    window.dispatchEvent(new CustomEvent('changeEquipment', { detail: item }));
}


// 设备巡检
const columns = [
    {
        prop: 'index',
        label: '序号'
    },
    {
        prop: 'carNo',
        label: '设备类型'
    },
    {
        prop: 'time',
        label: '设备编号'
    },
    {
        prop: 'auth',
        label: '巡检时间'
    },
    {
        prop: 'state',
        label: '当前状态'
    },

]
// 模拟数据
const recordData = ref([
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },
    {
        index: 1,
        carNo: '川A12345',
        time: '2024-03-18 10:00',
        auth: '已授权',
        state: '正常'
    },

])

// 监控运行状态
const monitorColumns = [
    {
        prop: 'id',
        label: '设备编号'
    },
    {
        prop: 'temperature',
        label: '温度'
    },
    {
        prop: 'power',
        label: '功率'
    },
    {
        prop: 'location',
        label: '位置'
    },
]
const monitorData = ref([
    {
        id: '1',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '2',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '3',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '4',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
    {
        id: '5',
        temperature: '25°C',
        power: '50W',
        location: 'A区'
    },
])


</script>

<style lang="scss" scoped>
.container {
    background: #001529;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // padding: 16px;
    gap: 16px;
    overflow: hidden;
    position: relative;

    .leftBox,
    .rightBox {
        width: 650px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
        z-index: 9;
    }

    .centerBox {
        position: absolute;
        z-index: 40;
        height: 100%;
        width: 100%;

    }
}

.panel-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    flex: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(64, 224, 208, 0.1);

    .panel-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 16px;
        position: relative;
        padding-left: 24px;
        color: #40E0D0;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: #40E0D0;
            border-radius: 2px;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0px;
            right: 0;
            // top: 50%;
            bottom: -10px;
            height: 1px;
            background: linear-gradient(90deg, #40E0D0, transparent);
        }
    }

    .panel-item-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;

        .img {
            width: 50px;
            height: 50px;
        }

        .value {
            margin-top: 5px;
            color: #fff;
        }
    }

    // 事故类型分析
    &.bridge-info-panel {
        .info-list {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            height: 80%;

            .info-first {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .info-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 8px;
                    border-radius: 4px;
                    transition: background-color 0.3s;

                    &:hover {
                        background: rgba(64, 224, 208, 0.1);
                    }

                    .img {
                        width: 60px;
                        height: 60px;
                    }

                    .info-text {
                        display: flex;
                        flex-direction: column;
                        gap: 4px;

                        .label {
                            color: rgba(255, 255, 255, 0.6);
                            width: 80px;
                        }

                        .value {
                            color: #fff;
                        }
                    }
                }
            }

            .info-second {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 12px;
                padding: 8px;
                border-radius: 4px;
                transition: background-color 0.3s;

                &:hover {
                    background: rgba(64, 224, 208, 0.1);
                }

                .img {
                    width: 60px;
                    height: 60px;
                }

                .info-text {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;

                    .label {
                        color: rgba(255, 255, 255, 0.6);
                        width: 80px;
                    }

                    .value {
                        color: #fff;
                    }
                }
            }

            // .info-item {
            //     display: flex;
            //     align-items: center;
            //     gap: 12px;
            //     padding: 8px;
            //     border-radius: 4px;
            //     transition: background-color 0.3s;

            //     &:hover {
            //         background: rgba(64, 224, 208, 0.1);
            //     }

            //     .img {
            //         width: 32px;
            //         height: 32px;
            //     }

            //     .info-text {
            //         display: flex;
            //         flex-direction: column;
            //         gap: 4px;

            //         .label {
            //             color: rgba(255, 255, 255, 0.6);
            //             width: 80px;
            //         }

            //         .value {
            //             color: #fff;
            //         }
            //     }
            // }
        }
    }

    // 设备巡检
    &.record-panel {

        .device-list {
            margin: 0 50px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .img-box {
                height: 200px;
                position: relative;

                .img {
                    height: 100%;
                    // object-fit: fill;
                }

                .number {
                    position: absolute;
                    top: 35%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 30px;
                    color: #fff;
                    font-weight: bold;
                }
            }


            .value {
                position: relative;
                bottom: 40px;
                text-wrap: nowrap;
                display: flex;
                align-items: center;
                ;
                color: rgba(255, 255, 255, 0.6);
            }
        }

        .table {
            height: 65% !important;

            :deep(.el-table) {
                th {
                    // background: rgba(0, 0, 0, 0.8);
                    // border-bottom: none;
                    // color: rgba(255, 255, 255, 0.8);
                }

                td {
                    //   background: rgba(0, 0, 0, 0.8);
                    // border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                    // color: #fff;
                }
            }
        }


    }

    // 监控运行状态
    &.monitor-panel {}

    // 消防设备状态
    &.fire-panel {}

    // 道路指示器状态
    &.path-panel {}
}
</style>